.shuo {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-image: url("https://alioss.xiamoqwq.com/anime_pic/44631706_p0.png?x-oss-process=style/large");
  background-size: cover;
  background-position: bottom;
  z-index: 1;

  #yuki {
    height: 100vh;
    width: 100vw;
    position: absolute;
    top: 0;
    z-index: 11;
    pointer-events: none;
  }

  $border-radius-size: 4px;

  .background-filter {
    $size: 100%;
    height: $size;
    width: $size;
    position: absolute;
    z-index: -2;
    pointer-events: none;
    backdrop-filter: blur(20px);
  }

  .scroll {
    height: 100vh;
    overflow: auto;
    z-index: 10;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;

    > .content {
      display: flex;
      flex-direction: row;
      margin: 10px 0 0 0;

      > .left, > .right {
        width: calc((100% - 632px - 40px) / 2);
      }

      > .left {
        display: flex;
        flex-direction: row;
        justify-content: end;

        .user {
          width: 350px;
          height: max-content;
          overflow: hidden;
          padding-bottom: 20px;
          position: fixed;
          filter: blur(0);
          transition: all .3s;

          .top {
            background: rgba(255, 255, 255, 1);
            padding-bottom: 20px;
            border-radius: $border-radius-size;
            position: relative;
            z-index: 10;

            &:hover .user-img > img {
              transform: scale(1.2) rotate(5deg);
              transition: all .5s;
            }

            .user-img {
              height: 150px;
              overflow: hidden;
              border-top-left-radius: $border-radius-size;
              border-top-right-radius: $border-radius-size;

              > img {
                height: 100%;
                width: 100%;
                object-fit: cover;
                transform: scale(1);
                transition: all .5s;
              }
            }

            .user-info {
              display: flex;
              margin: 0 20px;
              height: 40px;
              position: relative;

              img {
                $size: 80px;
                height: $size;
                width: $size;
                position: absolute;
                top: calc(-80px / 2);
                border-radius: 100%;
                object-fit: cover;
              }

              span {
                margin: 10px 0 0 90px;
                font-size: 15px;
              }
            }
          }

          .top:hover + .bottom, .bottom:hover{
            transform: translateY(0);
            opacity: 1;
            transition: all .5s;
          }

          .bottom {
            position: relative;
            z-index: 1;
            border-radius: $border-radius-size;
            background: rgba(255, 255, 255, 1);
            padding: 20px 0;
            margin-top: 10px;
            transform: translateY(-100%);
            opacity: 0;
            transition: all .5s;

            .title {
              display: none;
              margin: 0 20px 18px 20px;

              > span:nth-child(1) {
                color: #F5676E;
                font-size: 20px;
                font-weight: 700;
              }

              > span:nth-child(2) {
                color: #9AAEBB;
                font-size: 15px;
                font-weight: 500;
              }
            }

            .user-config {
              margin: 0 30px;
              padding-top: 10px;

              .row:not(:first-child) {
                margin-top: 15px;
              }

              .row {
                display: flex;
                align-items: center;

                div {
                  flex: 2;
                  font-size: 15px;
                  color: #48576a;
                }

                input {
                  flex: 8;
                  appearance: none;
                  background-color: #fff;
                  background-image: none;
                  border-radius: 4px;
                  border: 1px solid #bfcbd9;
                  box-sizing: border-box;
                  color: #1f2d3d;
                  font-size: 15px;
                  height: 36px;
                  line-height: 1;
                  outline: 0;
                  padding: 3px 10px;
                }
              }

              .save-btn {
                display: flex;
                justify-content: center;

                > div {
                  width: 100px;
                  background: rgba(0, 161, 214, .7) !important;
                  color: white;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  padding: 5px 0;
                  border-radius: $border-radius-size;
                  margin-top: 20px;
                  box-shadow: 0 5px 15px rgba(0, 161, 214, .3);
                  cursor: default;
                }
              }
            }
          }
        }
      }

      > .center {
        margin: 0 10px;
        width: 632px;
        border-radius: $border-radius-size;

        .list-size-0 {
          margin-top: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          left: 0;
          right: 0;

          #nos {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 10;
          }

          span {
            color: white;
            margin-right: 20px;
          }

          img {
            height: 100px;
          }
        }

        .add {
          overflow-x: hidden;
          background: white;
          border-radius: $border-radius-size;
          display: flex;
          flex-direction: column;
          position: relative;

          .title {
            position: absolute;
            color: rgba(193, 173, 227, .7);
            font-size: 13px;
            left: 20px;
            top: 20px;
            transition: all .3s;
          }

          .area-content:focus, .area-content-focus {
            margin-top: 30px !important;
            transition: margin-top .3s;
          }

          .area-content:focus + .title, .area-content-focus + .title {
            top: 10px;
            background: #C1ADE3;
            color: white;
            font-size: 12px;
            padding: 2px 5px;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            transition: all .3s;
          }

          .area-content {
            width: calc(95% - 10px);
            margin: 10px;
            border-radius: $border-radius-size;
            outline: none;
            border: unset;
            height: 200px;
            resize: none;
            background-image: url("https://alioss.xiamoqwq.com/xiamo/WordPress/2022/02/20220226093136847.jpg");
            background-position: bottom left;
            background-size: 100px;
            background-repeat: no-repeat;
            border: 1px solid #C1ADE3;
            padding: 10px;
            position: relative;
            transition: margin-top .5s;
          }

          .sub {
            display: flex;
            justify-content: end;
            padding: 0 16px 16px 0;

            span {
              background: rgba(0, 161, 214, .7) !important;
              box-shadow: 0 5px 15px rgba(0, 161, 214, .3);
              color: white;
              display: flex;
              justify-content: center;
              align-items: center;
              padding: 3px 12px;
              border-radius: $border-radius-size;
              font-size: 14px;
              cursor: default;
            }
          }
        }

        .his-content {
          background-color: white;
          margin-top: 10px;
          border-radius: $border-radius-size;
          padding: 20px;

          $avatar-size: 60px;
          $avatar-margin-left: 10px;

          &:last-child {
            margin-bottom: 10px;
          }

          .user {
            display: flex;
            align-items: center;

            .left {
              display: flex;

              img {
                height: $avatar-size;
                width: $avatar-size;
                object-fit: cover;
                border-radius: 100%;
              }
            }

            .right {
              margin-left: $avatar-margin-left;
              display: flex;
              flex-direction: column;

              > span:nth-child(1) {
                margin-bottom: 2px;
                color: rgb(251, 114, 153);
                font-size: 16px;
              }

              > span:nth-child(2) {
                margin-top: 2px;
                color: #99a2aa;
                font-size: 12px;
              }
            }
          }

          .text-area {
            padding-left: $avatar-size + $avatar-margin-left;

            > span {
              font-size: 14px;
              line-height: 22px;
              word-break: break-all;
            }
          }

          .img-area {
            margin-top: 20px;
            margin-left: $avatar-size + $avatar-margin-left;
            margin-right: $avatar-size + $avatar-margin-left;

            .images-scale {
              .item {
                width: 25%;
                padding-bottom: 25%;
              }
            }
          }
        }

        .his-end {
          height: 100px;
          background: unset;

          .to-top {
            bottom: -20px;
            transition: bottom 0.5s cubic-bezier(.4, -0.01, .02, 1.47);
          }

          img {
            height: 100px;
            position: absolute;
            bottom: -100px;
            left: 0;
            right: 0;
            margin: 0 auto;
            transition: bottom 0.5s cubic-bezier(.4, -0.01, .02, 1.47);
          }

          .to-top + .msg-bubble > span:nth-child(1) {
            opacity: 1;
            transform: translateY(0);
            transition: all .5s;
          }

          .to-top:hover + .msg-bubble > span:nth-child(1) {
            transform: translateY(-100%);
            opacity: 0;
            transition: all .5s;
          }

          .to-top:hover + .msg-bubble > span:nth-child(2) {
            transform: translateY(0px);
            opacity: 1;
            transition: all .5s .1s;
          }

          .msg-bubble {
            position: absolute;
            bottom: 110px;
            left: 0;
            right: 0;
            margin: 0 auto;
            display: flex;
            justify-content: center;

            > span:nth-child(1) {
              position: absolute;
              transition: all .5s;
            }

            > span:nth-child(2) {
              transition: all .5s;
            }

            > span:nth-child(1), > span:nth-child(2) {
              background: rgba(112, 77, 174, .7);
              color: white;
              padding: 10px 30px;
              border-radius: 3px;
              border: 2px dashed rgba(255, 255, 255, .7);
              transform: translateY(100%);
              opacity: 0;
              font-size: 14px;
            }
          }
        }
      }

      > .right {
        display: flex;
        flex-direction: row;
        justify-content: start;

        .message {
          position: fixed;
          width: 400px;
          height: 500px;
          background: white;
          border-radius: $border-radius-size;
          padding: 15px;

          .content-row {
            display: none;
            margin-bottom: 20px;

            > div:nth-child(2) {
              margin-top: 5px;
            }

            .url {
              color: rgba(0, 161, 214, 0.7);
            }

            .api-content-title, .params-title {
              span:nth-child(1) {
                color: #F5676E;
                font-size: 20px;
                font-weight: 700;
              }

              span:nth-child(2) {
                color: #9AAEBB;
                font-size: 15px;
                font-weight: 500;
              }
            }

            .code {
              background-color: #1f2d3d;
              padding: 5px 10px;
              color: white;
              border-radius: 5px;
            }

            .params-item {
              span:nth-child(1) {
                color: white;
                background: #00C2A6;
                padding: 4px 8px;
                border-radius: 5px;
                font-size: 16px;
              }

              span:nth-child(2) {
                margin-left: 15px;
                color: black;
                font-size: 13px;
              }
            }
          }

          .end {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            text-align: center;

            img {
              height: 150px;
              object-fit: contain;
            }
          }
        }
      }
    }
  }
}

.his-hide {
  transform: scale(.8);
  opacity: 0;
  transition: all .5s;
}

.his-show {
  transform: scale(1);
  opacity: 1;
  transition: all .5s;
}
